<template>
	<view class="mz_manage_view">
		<view class="tab_container">
			<u-tabs-swiper 
                ref="uTabs" 
                :list="tabList" 
                :current="current" 
                @change="tabsChange" 
                :is-scroll="false"
                height="90"
                font-size="30"
                bg-color="#F8F8F8"
                active-color="#000000"
                :show-bar="false"
                inactive-color="#8b8b8b"
                :active-item-style="{
                    transform:'scale(1.3, 1.3)',
                    transition:' all 0.2s',
                }">
            </u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<JydCp
				    :show="swiperCurrent==0"
                    :pageShow="pageShow">
				</JydCp>
			</swiper-item>
            <swiper-item class="swiper-item">
            	<YfypCp
                    :show="swiperCurrent==1"
                    :pageShow="pageShow">
                </YfypCp>
            </swiper-item>
		</swiper>
	</view>
</template>

<script>
import JydCp from"@/components/yf_manage/Jyd.vue"
import YfypCp from"@/components/yf_manage/Yfyp.vue"
export default {
    components:{
        JydCp,
        YfypCp,
    },
    data() {
        return {
            tabList: [
                {
                    name: '发药品',
                }, {
                    name: '已发药品',
                },
            ],
            // 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
            current: 0, // tabs组件的current值，表示当前活动的tab选项
            swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
            pageShow:false,  //当前页面是否显示
        };
    },
    onShow(){  //当页面可见时
        this.pageShow = true;
    },
    onHide(){  //当前页面隐藏时
        this.pageShow = false;
    },
    methods: {
        // tabs通知swiper切换
        tabsChange(index) {
            this.swiperCurrent = index;
        },
        // swiper-item左右移动，通知tabs的滑块跟随移动
        transition(e) {
            let dx = e.detail.dx;
            this.$refs.uTabs.setDx(dx);
        },
        // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
        // swiper滑动结束，分别设置tabs和swiper的状态
        animationfinish(e) {
            let current = e.detail.current;
            this.$refs.uTabs.setFinishCurrent(current);
            this.swiperCurrent = current;
            this.current = current;
        },
    }
};
</script>

<style lang="scss">
.mz_manage_view{
    display: flex;
    flex-direction: column;
    height: 100vh;
    >.tab_container{
        background-color: #F8F8F8;
    }
    swiper{
        flex: 1;
    }
}
</style>
